﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.operateColumn.js"></script>
    <script>
        $(function () {
            $("#a1").click(function () {
                $("#dg1").datagrid("deleteColumn", "Sex1");
            });

            $("#a2").click(function () {
                $("#dg1").datagrid("deleteColumn", "TS1");
            });

            $("#a3").click(function () {
                $("#dg1").datagrid("deleteColumn", "ID");
            });


            $("#a4").click(function () {
                var copts = $("#dg1").datagrid("popColumn", "TS3");
                alert(JSON.stringify(copts));
            });


            $("#a5").click(function () {
                $("#dg1").datagrid("moveColumn", { source: "TS4", target: "Sex2", point: "before" });
            });

            $("#a6").click(function () {
                $("#dg1").datagrid("moveColumn", { source: "TS4", target: "AreaName", point: "after" });
            });

            $("#a7").click(function () {
                $("#dg1").datagrid("shiftColumn", { field: "TS4", point: "before" });
            });

            $("#a8").click(function () {
                $("#dg1").datagrid("shiftColumn", { field: "TS4", point: "after" });
            });


            $("#a9").click(function () {
                $("#dg1").datagrid("freezeColumn", "TS4");
            });

            $("#a10").click(function () {
                $("#dg1").datagrid("unfreezeColumn", "TS4");
            });

            $("#a11").click(function () {
                $("#dg1").datagrid("shiftColumn", { field: "TS5", point: "after" });
            });

            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'ID', title: '主键', width: 100 });
                c1.push({ field: 'AreaName', title: '地区', width: 150 });
                c1.push({ field: 'Sex1', title: '男', width: 90 });
                c1.push({ field: 'Sex2', title: '女', width: 90 });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var normal00000 = [
                    { field: 'TS1', title: '测试1', width: 60 },
                    { field: 'TS2', title: '测试2', width: 60 },
                    { field: 'TS3', title: '测试3', width: 60 },
                    { field: 'TS33', title: '测试33', width: 60, hidden: true },
                    { field: 'TS4', title: '测试4', width: 60 },
                    { field: 'TS5', title: '测试5', width: 160, movable: false },
                    { field: 'TS6', title: '测试6', width: 160 },
                    { field: 'TS7', title: '测试7', width: 160 },
                    { field: 'TS8', title: '测试8', width: 160 },
                    { field: 'TS9', title: '测试9', width: 160 }
                ];
                result.push(normal00000);

                return result;
            };
            var options = {
                title: "列表",
                idField: "ID",
                rownumbers: true,
                fit: true,
                border: false,
                singleSelect: true,
                toolbar: "#toolbar1",
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-common-data.json",
                onBeforeDeleteColumn: function (field) { if (field != "ID") { return true; } else { alert("列“ID”不可删除。"); return false; } },
                onDeleteColumn: function (field) { alert("删除列[field = " + field + "]成功。"); }
            };

            $("#dg1").datagrid(options);
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false,title:'注意：列“主键”无法被删除的！'">
        <div id="toolbar1" style="padding:10px;">
            <a id="a1" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“男”</a>
            <a id="a2" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“测试1”</a>
            <a id="a3" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“主键”</a>
            <br /><br />
            <a id="a4" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“测试3”并显示该列 option </a>
            <br /><br />
            <a id="a5" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">移动列“测试4”到列“女”的左边</a>
            <a id="a6" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">移动列“测试4”到列“地区”的右边</a>
            <a id="a7" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">将列“测试4”往左移动</a>
            <a id="a8" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">将列“测试4”往右移动</a>
            <br /><br />
            <a id="a9" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">冻结-列“测试4”</a>
            <a id="a10" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">解冻-列“测试4”</a>
            <a id="a11" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">尝试将列“测试5”（该列设置了不可移动）往右移动</a>
        </div>
        <table id="dg1"></table>
    </div>
</body>
</html>
